Introduction

After establishing a layout for your app, you’ll need to populate it with information about the menu items that can be ordered. In this reading, you’ll revisit what you previously learned about getting data from the network and storing it in preparation for use in a React Native app.

For more detailed information about fetching and storing data, review the following lesson items from the course Working with Data in React Native :

• Contacting Servers, HTTP protocol and asynchronous calls in Module 2, Lesson 1

• HTTP protocol and Promises in action in Module 2, Lesson 1

• Working with JSON in Module 2, Lesson 2

• What is SQLite? in Module 4, Lesson 2

• Setting up Expo-SQLite in Module 4, Lesson 2

Data Fetching

Many mobile apps depend on data that is hosted on a remote server. In order to load that data into your applications, you will have to make a GET request to a REST API to fetch it from the server.

This reading will explore how you can cover all your networking needs in React Native applications by using the Fetch API. Fetch may seem familiar if you have used XMLHttpRequest or alternative networking APIs before. For additional information, you can always refer to the MDN's (Mozilla Developer Network) documentation .

The code required to make a request to the desired API endpoint using the fetch function in a React Native application is as follows:

fetch('https://api.example.com/endpoint')
.then((response) => response.json())
.then((data) => {
    // Do something with the data
  });

Let’s summarize what’s happening in the code snippet above:

• First, it’s important to note that the fetch function is an asynchronous function that returns a Promise . That promise resolves to a response object.

• Then, you can call the json method on the response object to parse the response as JSON format.

• Once you have the data, you can use it to update the state of your React Native component or pass it to a child component as props.

Here is an example of a complete React Native component that fetches data from an API and displays it in a list:

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';

const MyComponent = () => {
  const [data, setData] = useState([]);

useEffect(() => {
    fetch('https://api.example.com/endpoint')
.then((response) => response.json())
.then((data) => {
setData(data);
      });
  }, []);

  return (
    <FlatList
      data={data}
renderItem={({ item }) => (
        <View>
          <Text>{item.name}</Text>
          <Text>{item.description}</Text>
        </View>
      )}
keyExtractor={(item) => item.id}
    />
  );
};

export default MyComponent;

You can also leverage the async / await syntax in a React Native app:

const getDataFromApiAsync = async () => {
  try {
    const response = await fetch(
      'https://little-lemon.com/api/menu,
    );
    const json = await response.json();
    return json.menu;
  } catch (error) {
console.error(error);
  }
};

Storing data in SQLite

SQLite is a popular choice for storing data in a React Native application because it is a lightweight, self-contained database engine that does not require a separate server process. It is also widely supported, with native bindings available for many programming languages, including JavaScript.

Using a SQLite database in a React Native app allows you to store and retrieve structured data in your device, such as user information, application settings, and other types of data that need to be persisted between sessions. It also provides an easy way to query and manipulate data using SQL, which is a powerful and widely-used language for working with databases.

One of the main advantages of using SQLite in a React Native app is that it allows you to store data locally on the device, which can be useful in cases where an internet connection is not available or when you want to reduce the amount of data transfer between the device and a remote server.

Overall, using a SQLite database can be a convenient and efficient way to store and manage data in a React Native application.

Conclusion

In this reading, you reviewed the steps for fetching data from a remote server and then storing the data in a SQLite database, so that it can be readily used in a React Native app.